<template>
  <div style="flex:auto;">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu default-active="1" class="el-menu-vertical-demo" :router="true" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="clickitem">
      <el-menu-item index="/home/echart">
        <i class="el-icon-menu"></i>
        <span slot="title">首页数据分析</span>
      </el-menu-item>
      <el-menu-item index="/home/personnel">
        <i class="el-icon-s-order"></i>
        <span slot="title">人员管理</span>
      </el-menu-item>
      <el-menu-item index="/home/dataAdmin">
        <i class="el-icon-s-data"></i>
        <span slot="title">首页数据管理</span>
      </el-menu-item>
      <!-- disabled 禁用 -->
      <el-menu-item index="/home/user" :disabled="dispaly == '1' ? false:true">
        <i class="el-icon-user"></i>
        <span slot="title">账户管理</span>
      </el-menu-item>
      <el-menu-item index="/home/set">
        <i class="el-icon-setting"></i>
        <span slot="title">账号设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      dispaly: '1'
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    clickitem(index, indexPath) {
      this.$store.commit('BREAD', index)
    }
  },
  computed: {},
  mounted() {
    this.dispaly = window.localStorage.getItem('jurisdiction')
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-radio-group {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
</style>